<!--
 * @Author: Liu
 * @Date: 2023-05-08 10:52:26
 * @LastEditTime: 2023-05-08 17:28:40
-->
<template>
  <div class="popover-box" v-if="props.isShow">
    <div :class="['popover-content', 'dialog-inner', props.isShow && 'scale-in-center']">
      <div v-if="props.title" class="title"><img class="title-icon" src="/images/fail-icon-left.png" /><span>{{ props.title || '很遗憾' }}</span><img class="title-icon" src="/images/fail-icon-left.png" /></div>
      <div v-if="props.icon" class="icon"><img :src="props.icon" alt="" /></div>
     
      <div class="popover-data"><slot /></div>
      
      <div class="tips" v-if="showShare"><span>（每天一次分享机会）</span></div>
      <div class="footer" v-if="showShare">
        <!-- <div class="btn" role="button" @click="props.showShare ? $emit('showShareModal') :$emit('handleClose')">确定</div> -->
        <div class="btn" role="button" @click="$emit('handleClose')">确定</div>
        <div class="btn" role="button" @click="handleShare">分享</div>
      </div>
      <div class="footer" v-else>
        <div class="btn" role="button" @click="$emit('handleClose')">确&nbsp;&nbsp;认</div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { shareRecord } from '../api';
import useApp from '../hooks/useApp';

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    // default: '恭喜您'
  },
  icon: {
    type: String,
    default: `${import.meta.env.VITE_PUBLIC}/images/fail-icon.png`
  },
  tips: {
    type: Boolean,
  },
  getRemainGameNum: {
    type: Number
  },
  showShare: {
    type: Boolean
  }
})
const { appShare } = useApp()
const handleShare = () => {
  appShare()
  setTimeout(() => {
      shareRecord()
    }, 3000);
}

</script>
<style lang="scss"  scoped>
.popover-box {
  position: fixed;
  z-index: 9;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "ChangAnunitype-Bold";
  top: 0;

}

.popover-content {
  width: 606px;
  min-height: 397px;
  padding: 50px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  border-radius: 30px;
  text-align: center;
  // &::before {
  //     content: ' ';
  //     position: absolute;
  //     width: 84%;
  //     height: 28%;
  //     top: 50px;
  //     background-image: url(#{$base_path}/images/success-title.png);
  //     background-repeat: no-repeat;
  //     background-size: cover;
  // }
  &.dialog-inner {
      background-image: url(#{$base_path}/images/result-modal-bg.png);
      .title {
          margin-top: 0;
      }
      .footer {
          position: static;
      }
  }
}

.icon {
  display: flex;
  justify-content: center;
  padding: 10px 0 15px 0;
}

.icon > img {
  max-width: 30%;
}

.tips {
  // color: #999;
  margin-bottom: 14px;
  font-size: 20px;
  font-family: "ChangAnunitype-Regular";
}

.popover-bg {
  width: 100%;
  height: 100%;
}

.bell_bg {
  position: absolute;
  width: 119px;
  height: 118px;
  top: -60px;
}

.bell {
  position: absolute;
  width: 61px;
  height: 62px;
  top: -30px;

}

.popover-data {
  font-family: "ChangAnunitype-Bold";
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  // color: #3880f5;
  letter-spacing: 2px;
  font-weight: 900;
  margin: 20px 0;
}
.title {
  // color: #3880f5;
  display: flex;
  &>span {
    margin: 0 10px;
  }
  .title-icon {
    width: 47px;
    height: 45px;
  }
}
.popover-content {
  /* background: url(/images/prize-modal.png); */
  background-size: 100% 100%;
}

.popover-box .footer .btn {
  /* background: linear-gradient(180deg, #91d8ff, #4e81e9); */
  width: 220px;
}
.footer .btn+.btn {
  margin-left: 40px;
}
</style>